import styles from './AssetInPort.module.scss'
import { CSSProperties, FC, ReactNode } from 'react'
import { useColorVar, useStyles } from '@/hooks/styles'
import { motionEasing } from '@/config'
import { motion } from 'framer-motion'
import { SvgIcon } from '@/components/icons'
import { Text } from '@/components/icons/Text'
import { More } from '@/components/icons/More'
import { Video } from '@/components/icons/Video'
import { IconClose } from '@/components/icons/IconClose'
import { Port } from '@/components/graph/Port/Port'

interface IAssetInPort {
  assetType: 'string' | 'img' | 'audio' | 'video'
  width?: CSSProperties['width']
  height?: CSSProperties['height']
}

export const AssetInPort: FC<IAssetInPort> = ({
  assetType = 'string',
  width,
  height,
}) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  const showPrefixIcon = (type: IAssetInPort['assetType']) => {
    switch (type) {
      case 'string':
        return Text
      case 'video':
        return Video
    }
  }

  const showPrefixText = (type: IAssetInPort['assetType']) => {
    switch (type) {
      case 'string':
        return '文本'
      case 'video':
        return '视频'
    }
  }

  const showPortColor = (type: IAssetInPort['assetType']) => {
    switch (type) {
      case 'string':
        return {
          borderColor: c('DeepBlue-light'),
          circleColor: c('DeepBlue-main'),
        }
      case 'video':
        return {
          borderColor: c('Red-light'),
          circleColor: c('Red-main'),
        }
    }
  }

  return (
    <motion.div
      {...styleClass(['layout'], { width: width, height: height })}
      whileHover={{ background: '#F8F8F8' }}
      transition={{ ...motionEasing }}
    >
      <div {...styleClass(['prefix-layout'])}>
        <SvgIcon icon={showPrefixIcon(assetType)} />
        <div {...styleClass(['prefix-text'])}>{showPrefixText(assetType)}</div>
      </div>
      <div {...styleClass(['suffix-layout'])}>
        <SvgIcon icon={More} />
        <SvgIcon icon={IconClose} />
      </div>
      <div {...styleClass(['port-wrapper'])}>
        <Port {...showPortColor(assetType)} />
      </div>
    </motion.div>
  )
}
